<template>
	<div class="app-user">
		<a-dropdown
			:trigger="['click']"
			overlayClassName="app-user__dropdown"
			:transfer="true"
		>
			<div class="app-user__caption">
				<span>{{ user.name ? user.name : $t('common.user.name') }}</span>
				<a-avatar :src="user.avatar" />
			</div>
			<template #overlay>
				<a-menu class="menu" @click="handleSelect">
					<a-menu-item key="logout">
						<LoginOutlined />
						<span>{{ $t('common.user.logout') }}</span>
					</a-menu-item>
				</a-menu>
			</template>
		</a-dropdown>
	</div>
</template>
<script setup lang="ts">
import { LoginOutlined } from '@ant-design/icons-vue';
import { useRoute, useRouter } from 'vue-router';
import { getCookie } from 'qx-util';
import { IParam } from '@/core';
import { useAssetPath } from '@/hooks/use-app';
import { UserProps } from './user';
const props = defineProps(UserProps);
const route: any = useRoute();
const { push } = useRouter();
const user = reactive({
	name: '当前用户',
	avatar: useAssetPath('/assets/img/avatar.png'),
});

onMounted(() => {
	const appData = App.getAppData();
	if (appData) {
		if (appData.context && appData.context.srfpersonname) {
			user.name = appData.context.srfpersonname;
		}
		if (appData.context && appData.context.srfusericonpath) {
			user.avatar = appData.context.srfusericonpath;
		}
	}
	if (props.imagePath) {
		user.avatar = props.imagePath;
	}
	if (props.rawContent) {
		user.name = props.rawContent;
	}
});

//下拉选选中回调
const handleSelect = (item: IParam) => {
	const { key } = item;
	switch (key) {
		case 'logout':
			App.logout().then(() => {
				push({
					path: '/login',
					query: { redirect: window.location.hash.replace('#', '') },
				});
			});
			break;
	}
};
</script>
